<template>
   <div>
      <div class="task_search" style="padding-left: 12px;">
         <el-button type="primary" size="small" style="margin-bottom:2%" @click="addTaskClick">token账户流水</el-button>
      </div>
      <div style="padding: 12px;">
         <el-table
            v-loading="tableLoading"
            :border="true"
            :data="tableData"
            :header-cell-style="{background:'rgb(250, 250, 250)',color: 'rgba(0,0,0,.85)'}"
            stripe
            style="width: 100%;margin-bottom:20px;"
         >
            <el-table-column
               fixed
               type="index"
               label="序号"
               width="50"
               show-overflow-tooltip
               align="center"
               background="#000"
            >
               <template slot-scope="scope">
                  <span>{{(page.currentPage - 1) * page.pageSize + scope.$index + 1}}</span>
               </template>
            </el-table-column>
            <el-table-column prop="txType" label="流水类型" show-overflow-tooltip align="center"></el-table-column>
            <el-table-column prop="txOrderId" label="订单号" show-overflow-tooltip align="center"></el-table-column>
            <el-table-column prop="txAmount" label="流水金额" show-overflow-tooltip align="center"></el-table-column>
            <el-table-column prop="remark" label="备注" show-overflow-tooltip align="center"></el-table-column>
            <el-table-column
               fixed="right"
               label="操作"
               width="250"
               :border="true"
               show-overflow-tooltip
               align="center"
            >
               <template slot-scope="scope">
                  <el-button
                     icon="el-icon-view"
                     size="small"
                     type="text"
                     @click="detailsClick(scope.row)"
                  >详情</el-button>
                  <!-- <el-button
                     icon="el-icon-edit"
                     size="small"
                     type="text"
                     @click="editClick(scope.row)"
                  >编辑</el-button>
                  <el-button
                     type="text"
                     icon="el-icon-delete"
                     size="small"
                     @click="delClick(scope.row)"
                  >删除</el-button> -->
               </template>
            </el-table-column>
         </el-table>
         <!-- 分页底部 -->
         <el-pagination
            background
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :current-page="page.currentPage"
            :page-size="page.pagesize"
            layout="total,jumper,prev, pager, next,sizes"
            :total="page.total"
         ></el-pagination>
      </div>
      <!-- 0 新增/1 详情 / 2编辑 -->
      <a-modal
         v-model="dialogVisible"
         :title="dialogName==0?'新增':dialogName==1?'详情':'编辑'"
         :width="screen ==3 ?'50%':'70%'"
         destroy-on-close
      >
         <el-form ref="form" :model="form" :rules="rules">
            <el-row :gutter="10">
               <el-col :xs="24" :sm="12">
                  <el-form-item label="流水类型" :label-width="formLabelWidth">
                     <el-input v-model="form.txType" :disabled="dialogName==1"></el-input>
                  </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12">
                  <el-form-item label="订单号" :label-width="formLabelWidth">
                     <el-input v-model="form.txOrderId" :disabled="dialogName==1"></el-input>
                  </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12">
                  <el-form-item label="流水金额" :label-width="formLabelWidth">
                     <el-input v-model="form.txAmount" :disabled="dialogName==1"></el-input>
                  </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12">
                  <el-form-item label="备注" :label-width="formLabelWidth">
                     <el-input v-model="form.remark" :disabled="dialogName==1"></el-input>
                  </el-form-item>
               </el-col>
            </el-row>
         </el-form>
         <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleSave('form')" v-if="dialogName==0">保 存</el-button>
            <el-button type="primary" @click="handleupDate('form')" v-if="dialogName==2">修 改</el-button>
            <el-button @click="dialogVisible=false">取 消</el-button>
         </div>
      </a-modal>
   </div>
</template>

<script>
import { mapGetters } from "vuex";
import { fetchList, addObj, delObj, putObj, journal } from "@/api/org/token";
import { isMobile } from "@/util/validate.js";

export default {
   name: "project",
   computed: {
      ...mapGetters(["screen"])
   },
   data() {
      return {
         tableLoading: false,
         dialogVisible: false,
         dialogName: 0,
         formLabelWidth: "120px",
         page: {
            total: 0, // 总页数
            currentPage: 1, // 当前页数
            pageSize: 10 // 每页显示多少条
         },
         form: {},
         searchForm: {},
         tableData: [],
         rules: {},
      };
   },
   created() {
      this.getList(this.page);
   },
   methods: {
      getList(page, params) {
         this.tableLoading = true;
         journal(
            Object.assign(
               {
                  current: page.currentPage,
                  size: page.pageSize
               },
               params,
               this.searchForm
            )
         )
            .then(response => {
               this.tableData = response.data.data.records;
               this.page.total = response.data.data.total;
               this.tableLoading = false;
            })
            .catch(() => {
               this.tableLoading = false;
            });
      },
      handleCurrentChange(currentPage) {
         this.page.currentPage = currentPage;
         this.getList(this.page);
      },
      handleSizeChange(sizePage) {
         this.page.pageSize = sizePage;
         this.getList(this.page);
      },
      search() {},
      // 新增
      addTaskClick() {
         this.form = {};
         this.dialogVisible = true;
         this.dialogName = 0;
      },
      // 详情
      detailsClick(row) {
         this.form = {};
         this.dialogVisible = true;
         this.dialogName = 1;
         this.form = row;
      },
      // 编辑
      editClick(row) {
         this.form = {};
         this.dialogVisible = true;
         this.dialogName = 2;
         this.form = row;
      },
      // 删除
      delClick(row) {
         this.$confirm(
            "此操作将订单号为“ " + row.txOrderId + " ”数据删除, 是否继续?",
            "提示",
            {
               confirmButtonText: "确定",
               cancelButtonText: "取消",
               type: "warning"
            }
         )
            .then(() => {
               delObj(row.roleId).then(res => {
                  this.getList(this.page);
                  this.$message({
                     type: "success",
                     message: "删除成功!"
                  });
               });
            })
            .catch(() => {
               this.$message({
                  type: "info",
                  message: "已取消删除"
               });
            });
      },
      // 清空
      clearform() {},
      // 新增保存
      handleSave(form) {
         this.form.orgId = this.$store.getters.userInfo.ecoUserNo;
         this.$refs[form].validate(valid => {
            if (valid) {
               addObj(this.form)
                  .then(res => {
                     this.page.currentPage = 1;
                     this.getList(this.page);
                     this.dialogVisible = false;
                  })
                  .catch(() => {
                     this.$message({
                        type: "info",
                        message: "新增失败"
                     });
                  });
            } else {
               return false;
            }
         });
      },
      // 修改提交
      handleupDate(form) {
         this.$refs[form].validate(valid => {
            if (valid) {
               putObj(this.form)
                  .then(res => {
                     this.getList(this.page);
                     this.dialogVisible = false;
                  })
                  .catch(() => {
                     this.$message({
                        type: "info",
                        message: "修改失败"
                     });
                  });
            } else {
               return false;
            }
         });
      }
   },
   filters: {
      status: data => {
         switch (data) {
            case "0":
               return "正常";
            case "1":
               return "冻结";
            default:
         }
      },
      sex: data => {
         switch (data) {
            case "0":
               return "男";
            case "1":
               return "女";
            default:
         }
      }
   }
};
</script>
<style scoped>
</style>
